<template>
  <!--监测手机号任务 -->
  <div class="app-container">
    <div class="zdy-main" v-loading="loading">
      <el-form :model="queryParams" ref="queryForm" :inline="true" class="search-form-new" label-width="80px">
        <el-form-item label="店铺" prop="tenantId" v-hasPermi="['searchTenantID']">
        <el-select v-model="queryParams.tenantId" placeholder="请选择店铺" clearable filterable>
          <el-option v-for="dict in tenantList" :key="dict.tenantId" :label="dict.tenantName" :value="dict.tenantId" />
        </el-select>
      </el-form-item>
      <el-form-item label="手机号" prop="tel">
        <el-input v-model="queryParams.tel" placeholder="请输入手机号" clearable size="small" />
      </el-form-item>
      <el-form-item label="卡位编号" prop="num">
        <el-input v-model="queryParams.num" placeholder="请输入编号" clearable size="small" />
      </el-form-item>
      <el-form-item label="卡位类型" prop="deviceType">
        <el-select v-model="queryParams.deviceType" placeholder="请选择卡位类型" clearable>
          <el-option v-for="(dict,key) in commonMaps.telDeviceType" :key="dict.id" :label="dict.label" :value="key" />
        </el-select>
      </el-form-item>
      <el-form-item label="设备状态" prop="deviceStatus">
        <el-select v-model="queryParams.deviceStatus" placeholder="请选择设备状态" clearable>
          <el-option label="在线" :value="1" />
          <el-option label="离线" :value="2" />
        </el-select>
      </el-form-item>
        <el-form-item class="btns">
          <el-button type="primary" icon="el-icon-search" @click="search">搜索</el-button>
          <!-- <el-button icon="el-icon-plus" type="success" @click="addACount">新增</el-button> -->
          <el-button icon="el-icon-remove" type="danger" plain :disabled="ids.length==0" @click="remove">批量移除</el-button>
          <!-- <el-button type="success" icon="el-icon-goods" plain @click="chuzu">坑位分配</el-button> -->
        </el-form-item>
      </el-form>
      <div class="table_box">
        <el-table border :data="tableData.records" style="width: 100%" @selection-change="handleSelection">
          <el-table-column type="selection" width="55"></el-table-column>
          <el-table-column prop="num" label="卡位编号" width="120"></el-table-column>
          <el-table-column prop="tel" label="手机号" width="150"></el-table-column>
          <el-table-column prop="custodian" label="保管人" width="130"></el-table-column>
          <el-table-column prop="gameStr" label="详情" min-width="200">
            <template slot-scope="scope">
              <div class="bangding-box" v-if="scope.row.carrierTypeVoList">
                <div class="bditem" v-for="item in scope.row.carrierTypeVoList" :key="item.id">
                  <span>{{item.name}}:</span>
                  <span style="color:green" v-if="item.count==1">{{item.count==1?'已用':'未用'}}</span>
                  <span style="color:grey" v-else>{{item.count==1?'已用':'未用'}}</span>
                </div>
              </div>
              <div v-else>暂无</div>
            </template>
          </el-table-column>
          <el-table-column prop="remark" label="备注" min-width="100" show-overflow-tooltip></el-table-column>
          <el-table-column prop="remark" label="设备状态" width="100">
            <template slot-scope="scope">
              <el-tag v-if="scope.row.deviceStatus==1" type="success">在线</el-tag>
              <el-tag v-if="scope.row.deviceStatus==2" type="danger">离线</el-tag>
            </template>
          </el-table-column>
          <el-table-column prop="yue" label="话费余额" width="100">
            <template slot-scope="scope">
              <span v-if="scope.row.yue<10" style="color:red;font-size:18px;font-weight:blod">{{scope.row.yue}}</span>
              <span v-else>{{scope.row.yue}}</span>
            </template>
          </el-table-column>
          <el-table-column prop="telType" label="运营商" ></el-table-column>
          <!-- <el-table-column prop="remark" label="状态" width="100">
            <template slot-scope="scope">
              <el-switch v-model="scope.row.status" :active-value="1" :inactive-value="0" @change="statusChange($event, scope.row)">
              </el-switch>
            </template>
          </el-table-column> -->
          <el-table-column label="操作">
            <template slot-scope="scope">
              <el-button type="del" @click="remove(scope.row)">移除</el-button>
            </template>
          </el-table-column>
        </el-table>
        <pagination v-show="tableData.total > 0" :total="tableData.total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize" @pagination="getList" />
      </div>
    </div>

    <!-- 一下是弹出框 -->
    <addDialog ref="addDialog"></addDialog>
    <chuzuDialog ref="chuzuDialog"></chuzuDialog>
  </div>
</template>

<script>
import phoneApi from "@/api/phoneManage";
import addDialog from "./addPhonenumberDialog.vue";
import chuzuDialog from "./chuzuDialog.vue";
import checkPhoneApi from "@/api/gameConfig/checkPhonePx";
export default {
  name: "checkPhone",
  components: { addDialog, chuzuDialog },
  data() {
    return {
      taskInfo: {},
      tableData: {
        records: [],
        total: 0,
      },

      loading: false,
      queryParams: {
        pageNum: 1,
        pageSize: 20,
        isLease: 2,
      },
      taskId: "",
      selects: [],
      ids: [],
      // shengyu:0
    };
  },
  created() {
    this.getList();
    // this.residueNumber()
  },
  computed: {
    tenantList() {
      return this.$store.getters.tenantList;
    },
  },
  methods: {
    // 打开出租弹窗
    chuzu() {
      this.$refs.chuzuDialog.open();
    },
    // 移除出租池
    remove(row) {
      let ids = [];
      if (row && row.id) {
        ids = [row.id];
      } else if (this.ids && this.ids.length) {
        ids = this.ids;
      }
      if (!ids || ids.length === 0) {
        return this.$alert("请先选择数据！");
      }
      // 移除出租池
      const that = this;
      this.$modal
        .confirm('是否确认将编号为"' + ids + '"的号码移除出租池？')
        .then(function () {
          that.loading = true;
          phoneApi
            .removeIsLease({
              ids: ids,
            })
            .then((res) => {
              that.loading = false;
              that.$message({
                type: "success",
                message: res.msg,
              });
              that.getList();
            })
            .catch((err) => {
              console.log("%c Line:122 🍿 err", "color:#6ec1c2", err);
              // this.$alert(
              //   "<strong>这是 <i>HTML</i> 片段</strong>",
              //   "HTML 片段",
              //   {
              //     dangerouslyUseHTMLString: true,
              //   }
              // );
              that.loading = false;
            });
        })
        .catch(() => {});
    },
    // 表格选择项改变
    handleSelection(arr) {
      ////console.log("%c Line:442 🍆 表格选择改变", "color:#f5ce50", arr);
      this.selects = arr;
      this.ids = [];
      if (arr.length == 0) {
        this.ids = [];
      } else {
        arr.forEach((t) => {
          this.ids.push(t.id);
        });
      }
    },
    // 获取监控详情
    getInfo(taskId) {
      checkPhoneApi.getTaskDetail(taskId).then((res) => {
        this.taskInfo = res.data;
      });
    },
    // 获取列表
    getList() {
      this.tableData.records = [];
      this.loading = true;
      phoneApi
        .getList(this.queryParams)
        .then((response) => {
          this.loading = false;
          this.tableData.records = response.rows;
          this.tableData.total = response.total;
        })
        .catch((err) => {
          this.loading = false;
        });
    },

    // 搜索
    search() {
      this.getList();
    },
    // 新增
    addACount() {
      this.$refs.addDialog.open(this.taskInfo);
    },

    // 查询记录弹窗打开
    queryRecords(row) {
      this.$refs.recordsDialog.open(row.id);
    },
  },
};
</script>
<style lang="scss" scoped>
.bangding-box {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  .bditem {
    margin-right: 20px;
    &:last-child {
      margin-right: 0;
    }
  }
}
</style>
